<script type="text/javascript" charset="utf-8">
$(document).ready(function() {

	$(".form-input").focus(function() {
		$(this).attr("value", "");
		$(this).css({"color": "black"});
	});

	$("#username").keyup(function() {
		var length = $(this).length;
		if(length > 0) {
			$(this).removeClass("invalid").addClass("valid");
			$(this).clearQueue().css({"border": "2px solid #0F0"});
		}

		else {
			$(this).removeClass("valid").addClass("invalid");
			$(this).delay(1000).queue(function(next) {
				$(this).css({"border": "2px solid red"});
				next();
			});
		}
	});

	$("#email").keyup(function() {
		var isValid = emailCheck($(this).val());
		if(isValid) {
			$(this).removeClass("invalid").addClass("valid");
			$(this).clearQueue().css({"border": "2px solid #0F0"});
		}
		else {
			$(this).removeClass("valid").addClass("invalid");
			$(this).delay(1000).queue(function(next) {
				$(this).css({"border": "2px solid red"});
				next();
			});
		}
	});
});

function emailCheck(email) {
	var regex = /^[a-zA-Z][\w\.-]*[a-zA-Z0-9]@[a-zA-Z0-9][\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]$/
	console.log(email.match(regex));
	if(email.match(regex)) return true;
	else return false;
}
</script>

<div id="register-form-wrapper">
    <h2>Register a new account with us!</h2>
    <form action="php/register.php" method="post" accept-charset="utf-8">
    <div id="register-form-inputs">
    <ul>
        <li>
            <label for="displayname">Name:</label>
            <input type="text" name="displayname" value="Name" id="displayname" class="invalid form-input"/>
        </li>
        <li>
            <label for="email">Email:</label>
            <input type="text" name="email" value="Email" id="email" class="invalid form-input"/>
        </li>
        <li>
            <label for="password">Password:</label>
            <input type="password" name="password" value="password" id="password" class="invalid form-input"/>
        </li>
    </ul>
    </div>
    <input type="submit" value="I'm Ready! &rarr;"/>
    </form>
</div>
